iT邦幫忙

2025 iThome 鐵人賽

DAY 26
0
佛心分享-SideProject30

30天的旅程!從學習C#到開發小專案系列 第 26

DAY 26 - 前端發送的Request中附加Authorization Header

  • 分享至 

  • xImage
  •  

哈囉大家好!
今天要來試試看在前端發送Get Request來讀取存在資料庫中的users資訊,並且在發送的請求中附加Authorization Header。
那就馬上開始吧!

之前完成的登入功能,在發送請求並把使用者資訊儲存到資料庫後,後端會回傳給前端一個Session Token,前端會把這個Session token存到LocalStorage。
每次發送請求給後端時,我們必須把Session Token附在請求Header中。
現在我想要在add-new-records component(新增紀錄頁面)發送讀取所有使用者的請求!

檢查是否有Session Token

使用者登入成功後,會切換到records component頁面。先檢查是否有成功登入,localStorage是否有儲存token,若沒有儲存成功,代表使用者登入失敗,應該導回login頁面:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-records',
  templateUrl: './records.component.html',
  styleUrl: './records.component.css',
})
export class RecordsComponent implements OnInit {
  constructor(private route: Router) {}

  ngOnInit(): void {
    const token = localStorage.getItem('go_dutch_session_token');
    if (!token) {
      this.route.navigate(['/login']);
    }
  }
  addNewRecord() {
    this.route.navigate(['/add-new-record']);
  }
}

在請求中附加Authorization Header

之後在原本的ApiService中新增CreateAuthHeaders() function:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from '../environments/environment.development';
import { TokenRequest } from '../interfaces/auth';

@Injectable({
  providedIn: 'root',
})
export class ApiServiceService {
  constructor(private http: HttpClient) {}

  // 建立受HTTP保護的Header
  private createAuthHeaders(): HttpHeaders {
    const token = localStorage.getItem('go_dutch_session_token'); // 拿到token

    if (token) {
      // 將token附加到Authorization Header中
      return new HttpHeaders({ Authorization: `Bearer ${token}` });
    }

    return new HttpHeaders(); // 沒有Token,回傳一個空header
  }

(因為這個是小專案,所以我把所有的API都放在ApiService檔案中)
接著在同一個檔案中新增讀取所有使用者的getAllUsers() function:

getAllUsers() {
    const headers = this.createAuthHeaders(); // 產生Authorization Header
    const url = `${environment.apiBaseUrl}/Users/all-users`;
    return this.http.get(url, { headers: headers });
  }

在component中呼叫API

完成API的設定後,就可以在add-new-record component的constructor中注入ApiService, 並呼叫getAllUsers() function來請求所有使用者的資料:

import { Component } from '@angular/core';
import { ApiServiceService } from '../../services/api-service.service';

@Component({
  selector: 'app-add-new-record',
  templateUrl: './add-new-record.component.html',
  styleUrl: './add-new-record.component.css',
})
export class AddNewRecordComponent {
  constructor(private apiService: ApiServiceService) {}

  getAllUsers() {
    this.apiService.getAllUsers().subscribe({
      next: (response) => {
        console.log(response);
        // 處理回傳的使用者資訊
        // ...
      },
      error: (err) => {
        console.log(err.message);
      },
    });
  }
}

同樣的格式,之後其他的API也可以比照辦理!
統一在ApiService中處理讓附加Header的任務變得比較簡單,需要修改時只需要修改ApiService中的CreateAUthHeader() function 即可~


上一篇
DAY 25 - 建立主頁和新增紀錄頁面 (UI)
系列文
30天的旅程!從學習C#到開發小專案26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言